<template>
  <div class="app-container">
    <div class="search-container">
      <el-form v-show="showSearch" ref="queryParamsRef" :inline="true" :model="queryParams" label-width="100px">
        <el-form-item v-if="!userInfo.orgId" label="所属机构">
          <select-org-tree :value="queryParams.orgId" @orgNodeClick="orgNodeClick"/>
        </el-form-item>
        <el-form-item label="产品类别" prop="materialStyle">
          <el-select v-model="queryParams.materialStyle" class="width-120" clearable placeholder="请选择消耗品产品类别">
            <el-option
              v-for="dict in dictDataMap['MATERIAL_STYLE']"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="全成本分类" prop="htcaClass">
          <el-select v-model="queryParams.htcaClass" class="width-120" clearable placeholder="请选择全成本分类">
            <el-option
              v-for="dict in dictDataMap['COST_CLASS']"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="消耗品名称" prop="materialName">
          <el-input
            v-model="queryParams.itemInfo"
            clearable
            placeholder="消耗品名称、编码、拼音"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
       
        <el-form-item>
          <query-form-button @handleQuery="handleQuery" @resetQuery="resetQuery"/>
        </el-form-item>
      </el-form>
    </div>
    <el-row :gutter="10" class="mb8">
      <div class="ml10">
                <span class="el-form-item__label">总合计：进货价总额：<span class="fz19 font-color-red mr5">
                        {{ allPagePurchasePrice.toFixed(2) }}</span>元</span>
        <span class="el-form-item__label">零售价总额：<span class="fz19 font-color-red mr5">
                        {{ allPageRetailPrice.toFixed(2) }}</span>元</span>
        <span class="el-form-item__label mr80">进销差：<span class="fz19 font-color-red mr5">
                        {{ allBalance.toFixed(2) }}</span>元</span>
        <span class="el-form-item__label">
                    <span class="el-form-item__label">本页合计：进货价：
                        <span class="fz19 font-color-red mr5">{{ thisPagePurchasePrice.toFixed(2) }}</span>元
                    </span>
                    <span class="el-form-item__label">零售价总额:
                        <span class="fz19 font-color-red mr5">{{ thisPageRetailPrice.toFixed(2) }}</span>元
                    </span>
                    <span class="el-form-item__label">进销差：
                        <span class="fz19 font-color-red mr5">{{ thisBalance.toFixed(2) }}</span>元
                    </span>
                </span>
      </div>
    </el-row>

    <el-table v-adaptive :border="true" :data="materialStockList" :header-cell-style="$headerCellStyle"
              :stripe="true" highlight-current-row >
       
      <el-table-column :align="'center'" fixed="left"  label="消耗品名称" prop="materialName"/>
      <el-table-column :align="'center'" fixed="left"  label="消耗品编码" prop="materialCode"/>
      <el-table-column :align="'center'" :show-overflow-tooltip="true" fixed="left" label="生产商" prop="firmName"
                       width="150px"/>  
      <el-table-column :align="'center'" label="最小规格" prop="minSpec"/>
      <el-table-column :align="'center'" label="最小单位" prop="minUnits">
        <template #default="scope">
          <dict-data-tag :options="dictDataMap['spec_unit']" :value="scope.row.minUnits"/>
        </template>
      </el-table-column> 
      <el-table-column :align="'center'" label="包装规格" prop="packageSpec"/> 
      <el-table-column :align="'center'" label="型号" prop="materialModel"/>
      <el-table-column :align="'center'" :show-overflow-tooltip="true" label="库存量" prop="quantity"
                       width="140px">
        <template #default="scope">
          <template v-if="scope.row.quantityMin > 0">
            <!--小包装-->
            <dict-data-tag :options="dictDataMap['spec_unit']" :value="scope.row.minUnits"
                           style="float: right"/>
            <div style="float: right;margin-right: 5px;font-weight: bold;">
              {{ scope.row.quantityMin }}
            </div>
          </template>
          <!--大包装-->
          <template v-if="scope.row.quantityMax > 0">
            <dict-data-tag :options="dictDataMap['spec_unit']" :value="scope.row.packageUnits"
                           style="float: right"/>
            <div style="float: right;margin-right: 5px;font-weight: bold;">{{ scope.row.quantityMax }}
            </div>
          </template>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" label="进货价(元)" prop="purchasePrice">
        <template #default="scope">
          <span>{{ scope.row.packSize === '1' ? scope.row.purchasePriceMin : scope.row.purchasePrice }}</span>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" label="零售价(元)" prop="retailPrice">
        <template #default="scope">
          <span>{{ scope.row.packSize === '1' ? scope.row.retailPriceMin : scope.row.retailPrice }}</span>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" :show-overflow-tooltip="true" label="进货总价(元)" prop="purchasePriceMin"
                       width="100px">
        <template #default="scope">
          <span>{{ scope.row.itemPurchasePriceShow }}</span>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" :show-overflow-tooltip="true" label="零售总价(元)" prop="retailPriceMin"
                       width="100px">
        <template #default="scope">
          <span>{{ scope.row.itemRetailPriceShow }}</span>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" :show-overflow-tooltip="true" label="进销差(元)" prop="" width="100px">
        <template #default="scope">
                    <span>{{
                        (scope.row.quantity * scope.row.retailPriceMin -
                          scope.row.quantity * scope.row.purchasePriceMin).toFixed(2)
                      }}</span>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" label="折扣" prop="discount"/>
      <el-table-column :align="'center'" label="批号" prop="batchNo"/>
      <el-table-column :align="'center'" label="生产日期" prop="produceDate" width="120">
        <template #default="scope">
          <span>{{ $parseTime(scope.row.produceDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" label="有效期" prop="expireDate" width="120">
        <template #default="scope">
          <span>{{ $parseTime(scope.row.expireDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" label="灭菌方式" prop="sterilizationMethod"/>
      <el-table-column :align="'center'" label="灭菌批号" prop="sterilizationBatchNo"/>
      <el-table-column :align="'center'" label="灭菌日期" prop="sterilizationDate" width="120">
        <template #default="scope">
          <span>{{ $parseTime(scope.row.sterilizationDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column> 
      <el-table-column :align="'center'" label="入库单号" prop="documentNo" width="150"/>
      <el-table-column :align="'center'" label="货位" prop="location"/>
      <!-- <el-table-column :align="'center'" label="供应商" prop="supplierId"/> -->
      <el-table-column :align="'center'" label="是否供应" prop="isSupply">
        <template #default="scope">
          <dict-data-tag :options="dictDataMap['sys_yes_no']" :value="scope.row.isSupply"/>
        </template> 
      </el-table-column> 
      <el-table-column :align="'center'" label="停止供应时间" prop="stopDate" width="180">
        <template #default="scope">
          <span>{{ $parseTime(scope.row.stopDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" label="比例" prop="proportion"/> 
      <el-table-column :align="'center'" label="备注信息" prop="remarks"/>
      
    </el-table>

    <pagination
      v-show="total>0"
      v-model:limit="queryParams.pageSize"
      v-model:page="queryParams.pageNum"
      :total="total"
      @pagination="getList"
    />

  </div>
</template>
<script lang="ts">
export default {
  name: "MaterialStock"
}
</script>

<script lang="ts" setup>
import {
  addMaterialStock,
  delMaterialStock,
  getMaterialStock,
  selectPageMaterialStock,
  updateMaterialStock
} from "@/api/material/materialStock";

import {useDictStoreHook} from "@/store/modules/dict";
import {useUserStoreHook} from "@/store/modules/user";

const useUserStore = useUserStoreHook();

const dictStore = useDictStoreHook();
let dictDataMap = ref(dictStore.isTypeGetData('COST_CLASS','MATERIAL_STYLE','is_medical_insurance','spec_unit','sys_yes_no'))
const userInfo = <UserInfoBusi>useUserStore.user.userInfo

const {proxy} = getCurrentInstance() as any;

const formRef = ref();
const queryParamsRef = ref()
const materialStockList = ref([]);
const open = ref(false);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
// 药品库存表格数据
const stockList = ref([])
// 全部页进货价
const allPagePurchasePrice = ref(0)
// 全部页零售价价
const allPageRetailPrice = ref(0)
// 全部页进销差
const allBalance = ref(0)
// 本页进货价
const thisPagePurchasePrice = ref(0)
// 本页零售价价
const thisPageRetailPrice = ref(0)
// 本页进销差
const thisBalance = ref(0)
const currentSelectDept = proxy.$currentSelectDept



const queryParams = ref<any>({
  pageNum: 1,
  pageSize: 10,
  orgId: userInfo.orgId,
  storageId: currentSelectDept,
  materialStyle: '',
  htcaClass: '',
  materialName: ''
})

if (userInfo.orgId) {
  queryParams.value.orgId = userInfo.orgId
  getList()
}

// 机构树点击事件
function orgNodeClick(data, _e) {
  queryParams.value.orgId = data.orgId
  getList()
}



/** 查询消耗品库存列表 */
function getList() {
  selectPageMaterialStock(queryParams.value).then((response: any) => {
    materialStockList.value = response.rows;
    total.value = response.total;
    thisPagePurchasePrice.value = 0
    thisPageRetailPrice.value = 0
    thisBalance.value = 0
    allPageRetailPrice.value = 0
    allPagePurchasePrice.value = 0
    allBalance.value = 0
    if (response.rows.length > 0) {
      allPageRetailPrice.value = response.rows[0].allPageRetailPrice
      allPagePurchasePrice.value = response.rows[0].allPagePurchasePrice
      allBalance.value = response.rows[0].allBalance 
      materialStockList.value.forEach((item: any) => {
        let itemPurchasePriceShow = Number(item.packSize === '1' ? item.quantity * item.purchasePriceMin : item.quantity / item.packageNum * item.purchasePrice)
        let itemRetailPriceShow = Number(item.packSize === '1' ? item.quantity * item.retailPriceMin : item.quantity / item.packageNum * item.retailPrice)
        thisPagePurchasePrice.value += itemPurchasePriceShow
        thisPageRetailPrice.value += itemRetailPriceShow
        thisBalance.value += thisPageRetailPrice.value - thisPagePurchasePrice.value
        item.itemPurchasePriceShow = itemPurchasePriceShow.toFixed(2)
        item.itemRetailPriceShow = itemRetailPriceShow.toFixed(2) 
        item.quantityMax = Math.floor(item.quantity / item.packageNum)
        item.quantityMin = item.quantity % item.packageNum 
      })
    }  
  });
}


/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  queryParamsRef.value.resetFields()
  // proxy.resetForm("queryRef");
  handleQuery();
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('material/materialStock/export', {
    ...queryParams.value
  }, `materialStock_${new Date().getTime()}.xlsx`)
}

getList();
</script>
